<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategy.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<link rel="stylesheet" href="jquery-SearchBar20160307/css/search-form.css">
        <style>


            .nav-search{
                position: relative;
            }
            .search{
                position: absolute;
                right: 138px;
                top: 15px;
            }

            .search-wrapper .input-holder .search-icon{
                position: absolute;
                right: 2px;
                top: 5px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
            .search-wrapper.active .input-holder .search-icon{
                position: absolute;
                right: -8px;
                top: -7px;
                width: 40px;
                height: 40px;
            }
            .search-wrapper .input-holder .search-input {
                top: -10px;
            }
            .search-wrapper{
                width: 80%;
            }
            .input-holder{
                right: 65px;
            }

        </style>
		<script>
			$(function () {
			    var html = '';
                var content='';
                var regionId;
				$.get("/regions/1",function (data) {
					$.each(data,function (index, item) {
						html += '<li class="nav-item"><a data-id="'+item.id+'" class="nav-link" id="pills-'+item.id+'-tab" data-toggle="pill" href="#pills-'+item.id+'">'+item.name+'</a></li>';

                        content += '<div class="tab-pane fade" id="pills-'+item.id+'"></div>';

					});

                    //拼接导航栏的标题(地区名)
					$("#pills-tab").append(html);


					//拼接导航浪的内容(推荐地区)
                    $("#pills-tabContent").append(content);

					$(".nav-link").click(function () {

                        //给地区绑定一个点击事件
                        regionId = $(this).data("id");
                        //推荐页面没有地区id,排除点击推荐页面
                        if(regionId){
                            //通过地区id获得地区对应的所有攻略信息,data是从模板拿过来的html数据
                            $.get("/regions/"+regionId+"/strategies", function (data) {

                                $("#pills-"+regionId).html(data);
                            },"html");
						}
                    });
                });


                //分页临时变量
                var currentPage = 2;
                //Jrender到下一页时,会自动把上一页的数据丢弃
                var dataList = [];	//分页缓存数据
                //解决一直翻页的问题
                var totalPage = 2;	//总页数

                function query() {
                    if(regionId){
                        //第一页数据
                        $.get("/regions/"+ regionId +"/strategies",{currentPage:currentPage,pageSize:6},function (data) {
                            //保存当前页数据
                            var html='';
                            $.each(data.list,function (index, item) {
                                html += '<div class="col-6 mb">\n' +
                                    '                <a href="/strategyCatalogs.html?id='+item.id+'">\n' +
                                    '                    <img class="float-left " src="'+item.coverUrl+'">\n' +
                                    '                    <div class="classify-text">\n' +
                                    '                        <span>'+item.subTitle+'</span>\n' +
                                    '                        <p>0人收藏</p>\n' +
                                    '                    </div>\n' +
                                    '                </a>\n' +
                                    '            </div>'
                            });

                            $(".classify").append(html);

                            currentPage+=1;//下一页,当屏幕滚动式才会自动+1

                            totalPage = data.pages;//总页数
                        },"json");
					}

                };
                query();

                //屏幕滚动事件
                $(window).scroll(function () {
                    //手机屏幕高度+滚动高度>=页面高度时才进行翻页
                    if($(window).height() + $(document).scrollTop() + 1 >= $(document).height()){
                        if(currentPage <= totalPage){
                            //给下一页回显数据
                            query();
                        }else{
                            $(document).dialog({
                                type : 'notice',
                                infoText: "够了,到底了,难受...",
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }

                    }
                });



				$.get("/travels/commends",{type:2,pageSize:0},function (data) {
                    $(".commend").renderValues(data.list[0],{
                        setHref:function (item, value) {
							$(item).attr("href",$(item).data("href") + value);
                        }
					});
                });
				$.get("/strategies",{state:1},function (data) {
                    $(".strategyCommend").renderValues(data,{
                        setHref:function (item, value) {
							$(item).attr("href", $(item).data("href") + value);
                        }
					});
                });
            });
		</script>
	</head>

	<body>
	<div class="search-head">
		<div class="row nav-search">
			<div class="col-xl-5">
				<a href="index.html">
					<span><i class="fa fa-chevron-left fa-2x"></i></span>
				</a>
			</div>
			<div class="col-xl-4 search"  style="width: min-content">
                <section class="container">
                    <form onsubmit="submitFn(this, event);">
                        <div class="search-wrapper" >
                            <div class="input-holder col-xl-3"  style="height: 45px">
                                <input type="text" class="search-input " style="right:100%" placeholder="Type to search"/>
                                <button class="search-icon"    onclick="searchToggle(this, event);"><span></span></button>
                            </div>
							<span class="close " style="height: 8px; width:0px" onclick="searchToggle(this, event);"></span>

                        </div>
                    </form>
                </section>

                        <!--
                            <div class="input-group-sm search">
                                <input class="form-control searchBtn" placeholder="找攻略">
                            </div>-->
			</div>
		</div>
	</div>

	<script type="text/javascript">
        function searchToggle(obj, evt){
            var container = $(obj).closest('.search-wrapper');

            if(!container.hasClass('active')){
                container.addClass('active');
                evt.preventDefault();
            }
            else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
                container.removeClass('active');
                // clear input
                container.find('.search-input').val('');
                // clear and hide result container when we press close
                container.find('.result-container').fadeOut(60, function(){$(this).empty();});
            }
        }

        function submitFn(obj, evt){
            value = $(obj).find('.search-input').val().trim();

            _html = "您搜索的商品为: ";
            if(!value.length){
                _html = "";
            }
            else{
                _html += "<b>" + value + "</b>";
            }

            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.result-container').fadeIn(60);

            evt.preventDefault();
        }
	</script>



	<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
				<span style="font-weight: bold;">推荐</span>
			</a>
		</li>
	</ul>

	<div class="tab-content" id="pills-tabContent">
		<div class="tab-pane fade active show" id="pills-top">
			<div class="container commend">
				<a data-href="/travelContent.html?id=" render-fun="setHref" render-key="id">
					<img  render-src="coverUrl">
					<p render-html="title"></p>
				</a>
			</div>
			<div class="container strategyCommend">
				<h6>当季推荐</h6>
				<div class="row hot" render-loop="list">
					<div class="col-4">
						<a data-href="/strategyCatalogs.html?id=" render-fun="setHref" render-key="list.id">
							<img  render-src="list.coverUrl">
							<p render-html="list.title"></p>
						</a>
					</div>
				</div>
			</div>
		</div >
	</div>

	</body>
</html>